<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Tweet! Put Twitter on your site with this simple, unobtrusive jQuery widget</title>
  <link href="index.css" rel="stylesheet"/>
  <link href="jquery.tweet.css" rel="stylesheet"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="jquery.tweet.js" charset="utf-8"></script>
  <script type="text/javascript">
    function randomString(length) {
      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
      var str = '';
      for (var i = 0; i < length; i++) {
        str += chars[Math.floor(Math.random() * chars.length)];
      }
      return str;
    }
    var rnd = randomString(8);

    jQuery(document).ready(function($) {
      $(".rnd").replaceWith(rnd);


      $(".example").hide().each(function(i,e){
        $(e).before($('<a class="show-code" href="#">Show code &raquo;</a>').
                      click(function(ev) {
                        $(e).slideToggle();
                        $(this).hide();
                        ev.preventDefault();
                      }));
      });
    });
  </script>
</head>
<body>
  <h1>Tweet!</h1>
  <h2>put <a href="http://twitter.com">twitter</a> on your website with <em>tweet!</em>, an unobtrusive javascript plugin for jquery.</h2>

  <p>Check out the script in action at <a href="http://seaofclouds.com">seaofclouds.com</a>, and see the following demos.</p>

  <h3>Examples</h3>

  <p>Displaying three tweets from the <a href="http://twitter.com/seaofclouds">seaofclouds twitter feed</a>:</p>
  <pre class="example">
    $(function(){
      $(".tweet").tweet({
        join_text: "auto",
        username: "seaofclouds",
        avatar_size: 48,
        count: 3,
        auto_join_text_default: "we said,",
        auto_join_text_ed: "we",
        auto_join_text_ing: "we were",
        auto_join_text_reply: "we replied",
        auto_join_text_url: "we were checking out",
        loading_text: "loading tweets..."
      });
    });
  </pre>
  <div class='tweet query'></div>
  <script type="text/javascript">
    $(function(){ $(".example").each(function(i, e){ eval($(e).text()); }); });
  </script>

  <p>Displaying four tweets from the query "<a href="http://search.twitter.com/search?q=tweet.seaofclouds.com">tweet.seaofclouds.com</a>":</p>
  <pre class="example">
    $(function(){
      $("#query").tweet({
        avatar_size: 32,
        count: 4,
        query: "tweet.seaofclouds.com",
        loading_text: "searching twitter..."
      });
    });
  </pre>
  <div id="query" class='query'></div>

  <p>Displaying up to three links with the search query "<a href="http://search.twitter.com/search?q=from%3Aseaofclouds%20http">from:seaofclouds http</a>":</p>
  <pre class="example">
    $(function(){
      $("#userandquery").tweet({
        count: 3,
        query: "from:seaofclouds http",
        loading_text: "searching twitter..."
      });
    });
  </pre>
  <div id='userandquery' class="query"></div>

  <p>Displaying four tweets from the two users "seaofclouds" and "laughingsquid", refreshing every 10 seconds:</p>
  <pre class="example">
    $(function(){
      $("#fromtwo").tweet({
        avatar_size: 32,
        count: 4,
        username: ["seaofclouds", "laughingsquid"],
        loading_text: "searching twitter...",
        refresh_interval: 10
      });
    });
  </pre>
  <div id='fromtwo' class="query"></div>

  <p>Displaying tweets from users on the 'team' list of 'twitter':</p>
  <pre class="example">
    $(function(){
      $("#list").tweet({
        avatar_size: 32,
        count: 4,
        username: "twitter",
        list: "team",
        loading_text: "loading list..."
      });
    });
  </pre>
  <div id='list' class="query"></div>

  <p>Displaying the user seaofclouds' favorite tweets:</p>
  <pre class="example">
    $(function(){
      $("#favorites").tweet({
        avatar_size: 32,
        count: 3,
        username: "seaofclouds",
        favorites: true,
        loading_text: "loading list..."
      });
    });
  </pre>
  <div id="favorites" class="query"></div>

  <p>Fetch 20 tweets, but filter out @replies, and display only 3:</p>
  <pre class="example">
    $(function(){
      $("#filter").tweet({
        avatar_size: 32,
        count: 3,
        fetch: 20,
        filter: function(t){ return ! /^@\w+/.test(t["tweet_raw_text"]); },
        username: "seaofclouds",
      });
    });
  </pre>
  <div id='filter' class="query"></div>

  <p>Customize the layout to eliminate the date stamps and avatars:</p>
  <pre class="example">
    $(function(){
      $("#custom").tweet({
        avatar_size: 32,
        count: 4,
        username: "seaofclouds",
        template: function(i){return i["text"]}
      });
    });
  </pre>
  <div id='custom' class="query"></div>

  <p>Adding a message when no tweets matching '<span class="rnd">somerandomstring</span>' are found:</p>
  <pre class="example">
    $(function(){
      $("#empty").tweet({
        avatar_size: 32,
        count: 4,
        query: rnd,
        loading_text: "searching twitter..."
      }).bind("empty", function() { $(this).append("No matching tweets found"); });
    });
  </pre>
  <div id='empty' class="query"></div>

  <h3>Features</h3>
  <ul>
    <li>small size and fast download time</li>
    <li>will not slow down or pause your page while tweets are loading</li>
    <li>display up to 100 tweets, as permitted by the twitter search api</li>
    <li>display tweets from a twitter search, or from your own feed</li>
    <li>optional verb tense matching, for human readable tweets</li>
    <li>optionally display your avatar</li>
    <li>optionally display tweets from multiple accounts!</li>
    <li>display tweets from a list, or display a user's favorites</li>
    <li>optional reloading after a specified delay</li>
    <li>automatic linking of  @replies to users&#8217; twitter page</li>
    <li>automatic linking of URLs</li>
    <li>uses <a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">Twitter's Search API</a>, so you can display any tweets you like</li>
    <li>Display up to 100 tweets that have been posted within 7 days (limit set by <a href="http://apiwiki.twitter.com/Twitter-Search-API-Method%3A-search">Twitter's Search API</a>)</li>
    <li>automatic linking of <a href="http://search.twitter.com/search?q=&amp;tag=hashtags">#hashtags</a>, to a twitter search of all your tags</li>
    <li>converts &lt;3 to a css styleable <span class='heart'>♥</span> (we ♥ hearts)</li>
    <li>makes awesome text, AWESOME text with AWESOMEIZER</li>
    <li>customize the layout for tweets within the widget</li>
    <li>apply custom filters, e.g. to remove @replies</li>
    <li>define a custom sort order for tweets</li>
    <li>customize the style with your own stylesheet or with other jquery plugins</li>
    <li>compatible with most jquery versions, including jquery 1.2.6, 1.3.x, 1.4.x, and the latest 1.5</li>
  </ul>

  <p><strong>NOTE:</strong> Some users have reported that they <a href="http://help.twitter.com/forums/10713/entries/42646">do not show up in Twitter's search results</a>.</p>

  <div class='download'>
    <h3>Download</h3>
    <p>
      <a href="http://github.com/seaofclouds/tweet/zipball/master">
        <img width="90" src="http://github.com/images/modules/download/zip.png"></a>
      <a href="http://github.com/seaofclouds/tweet/tarball/master">
        <img width="90" src="http://github.com/images/modules/download/tar.png"></a>
    </p>
  </div>

  <h3>Usage</h3>
  <p><strong>1.</strong> <a href="http://jquery.com/">Get JQuery</a>. In these examples, we use <a href="http://code.google.com/apis/ajaxlibs/">Google's AJAX Libraries API</a>.
  <p><strong>2.</strong> include jQuery and jquery.tweet.js files in your template's <span class="code">&lt;head&gt;</span>.</p>
  <code>
    &lt;script language=&quot;javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />
    &lt;script language=&quot;javascript&quot; src=&quot;/tweet/jquery.tweet.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
  </code>
  <p><strong>3.</strong> Also in <span class="code">&lt;head&gt;</span>, Initialize tweet! on page load with your Username and other options</p>
  <code>
    &lt;script type=&apos;text/javascript&apos;&gt;<br />
    &nbsp; &nbsp; $(document).ready(function(){<br />
    &nbsp; &nbsp; &nbsp; &nbsp; $(".tweet").tweet({<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; username: "seaofclouds",<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; join_text: "auto",<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; avatar_size: 32,<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; count: 3,<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_default: "we said,", <br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_ed: "we",<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_ing: "we were",<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_reply: "we replied to",<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto_join_text_url: "we were checking out",<br />
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loading_text: "loading tweets..."<br />
    &nbsp; &nbsp; &nbsp; &nbsp; });<br />
    &nbsp; &nbsp; });<br />
    &lt;/script&gt;
  </code>
  <p><strong>4.</strong> In <span class="code">&lt;body&gt;</span>, include a placeholder for your tweets. They'll get loaded in via JSON. How fancy!</p>
  <code>
    &lt;div class=&quot;tweet&quot;&gt;&lt;/div&gt;
  </code>
  <p><strong>5.</strong> Style with our stylesheet in <span class="code">&lt;head&gt;</span>, or modify as you like!</p>
  <code>
    &lt;link href=&quot;jquery.tweet.css&quot; media=&quot;all&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;/&gt;
  </code>

  <h3>Contribute</h3>
  <p>Bring your code slinging skills to <a href="http://github.com/seaofclouds/tweet/">Github</a> and help us develop new features for tweet!</p>
  <code>
    git clone git://github.com/seaofclouds/tweet.git
  </code>
  <a href="http://github.com/seaofclouds/tweet"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub" /></a>
  <p>
    <strong>Report bugs and request features</strong> in <a href="http://github.com/seaofclouds/tweet/issues">Github Issues</a>
  </p>
  <h3>Licensed under the MIT</h3>
  <code>
    <a href="http://www.opensource.org/licenses/mit-license.php">http://www.opensource.org/licenses/mit-license.php</a>
  </code>
  <div class='twoot'>
    <h3>If you like Tweet, check out <a href="http://github.com/peterk/twoot/tree/master">Twoot</a>!</h3>
    <p><a href="http://github.com/peterk/twoot/tree/master">Twoot</a> is a miniature Twitter client based on Tweet that allows you to post tweets and see what your friends are up to. Thanks, <a href="http://www.peterkrantz.com">Peter Krantz</a>!</p>
  </div>
  <p class='copyright'>something nifty from <a href="http://seaofclouds.com">seaofclouds</a><span class="trade">&trade;</span> | <a href="http://github.com/seaofclouds/tweet/">contribute</a></p>
</body>
</html>
